<template>
  <div class="number-info" :class="theme ? 'number-info-'+theme : ''">
    <div v-if="title" class="number-info-title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="number-info-subtitle">
      <slot name="subTitle"> {{ subTitle }}</slot>
    </div>
    <div class="number-info-value" :style="'margin-top:'+ gap + 'px'">
      <span>
        <slot name="total">{{ total }}</slot>
        <slot name="suffix"><em class="suffix">{{ suffix }}</em></slot>
      </span>
      <span class="sub-total">
        {{ subTotal }}
        <slot name="subSuffix">
          <Icon type="arrow-up-b" v-if="status === 'up'"></Icon>
          <Icon type="arrow-down-b" v-if="status == 'down'"></Icon>
        </slot>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NumberInfo',
  props: {
    title: {
      type: String
    },
    subTitle: {
      type: String
    },
    total: {
      type: String
    },
    subTotal: {
      type: String
    },
    status: {
      type: String
    },
    suffix: {
      type: String
    },
    gap: {
      type: Number
    },
    theme: {
      type: String
    }
  }
}
</script>
<style scoped>
.number-info .suffix {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  font-style: normal;
  margin-left: 4px;
}

.number-info .number-info-title {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  margin-bottom: 16px;
  transition: all .3s;
}

.number-info .number-info-subtitle {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.number-info .number-info-value {
  margin-top: 4px;
  font-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.number-info .number-info-value>span {
  color: rgba(0, 0, 0, 0.85);
  display: inline-block;
  line-height: 32px;
  height: 32px;
  font-size: 24px;
  margin-right: 32px;
}

.number-info .number-info-value .sub-total {
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  vertical-align: top;
  margin-right: 0;
}

.number-info .number-info-value .sub-total i {
  font-size: 12px;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  margin-left: 4px;
}

.number-info-light .number-info-value>span {
  color: rgba(0, 0, 0, 0.65);
}
</style>
